<template>
    <div class="friend-request-container">
        <a-page-header class="a-page-header" title="好友请求" />

        <div class="content">
            <!-- 我发送的好友请求（待处理） -->
            <details open v-show="pendingRequestBySender.length > 0">
                <summary>我发送的好友请求</summary>
                <a-list class="a-list" item-layout="horizontal" :data-source="pendingRequestBySender">
                    <template #renderItem="{ item }">
                        <a-list-item class="a-list-item" style="border-bottom-width: 0;">
                            <a-list-item-meta :description="item.create_at.slice(0, 16)">
                                <template #title>
                                    <span>{{ item.other_user_nickname }}</span>
                                </template>
                                <template #avatar>
                                    <a-avatar shape="square" :size="50" :src="baseURL + item.other_user_avatar" />
                                    <div class="status-tag">
                                        <span>等待对方确认</span>
                                    </div>
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
            </details>

            <!-- 我收到的好友请求（同意|拒绝） -->
            <details open v-show="pendingRequestByReceiver.length > 0">
                <summary>我收到的好友请求</summary>
                <a-list class="a-list" item-layout="horizontal" :data-source="pendingRequestByReceiver">
                    <template #renderItem="{ item }">
                        <a-list-item class="a-list-item" style="border-bottom-width: 0;">
                            <a-list-item-meta :description="item.create_at.slice(0, 16)">
                                <template #title>
                                    <span>{{ item.other_user_nickname }}</span>
                                </template>
                                <template #avatar>
                                    <a-avatar shape="square" :size="50" :src="baseURL + item.other_user_avatar" />
                                    <div class="status-tag">
                                        <a-button type="text" style="color: #52c67a"
                                            @click="friendShipUpdate(1, item.other_user_id)">同意</a-button>
                                        <a-button type="text" danger
                                            @click="friendShipUpdate(2, item.other_user_id)">拒绝</a-button>
                                    </div>
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
            </details>

            <!-- 已拒绝好友请求 -->
            <details open v-show="rejectedRequestByReceiver.length > 0">
                <summary>被拒绝的好友请求</summary>
                <a-list class="a-list" item-layout="horizontal" :data-source="rejectedRequestByReceiver">
                    <template #renderItem="{ item }">
                        <a-list-item class="a-list-item" style="border-bottom-width: 0;">
                            <a-list-item-meta :description="item.create_at.slice(0, 16)">
                                <template #title>
                                    <span>{{ item.other_user_nickname }}</span>
                                </template>
                                <template #avatar>
                                    <a-avatar shape="square" :size="50" :src="baseURL + item.other_user_avatar" />
                                    <span class="status-tag">对方已拒绝</span>
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
            </details>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
import { FriendShipList_API, FriendShipUpdate_API } from '@/api/friendship.js'
import { message, notification } from 'ant-design-vue';
import { useStatusStore } from '@/pinia/useStatusStore.js'

const baseURL = import.meta.env.VITE_API_BASE_URL
const statusStore = useStatusStore()
const socket = inject('socket')

const pendingRequestBySender = ref([])
const pendingRequestByReceiver = ref([])
const rejectedRequestByReceiver = ref([])

// 获取好友关系列表(0：待处理好友请求，2：已拒绝好友请求)
const fetchFriendshipList = async () => {
    const { data: pending } = await FriendShipList_API(0)
    const { data: rejected } = await FriendShipList_API(2)

    const pedingRecord = pending.data || []
    const rejectedRecord = rejected.data || []

    // 发送方：待处理
    pendingRequestBySender.value = pedingRecord.filter(item => item.direction === 'sender')
    // 接收方：待处理
    pendingRequestByReceiver.value = pedingRecord.filter(item => item.direction === 'receiver')
    // 接收方：已拒绝
    rejectedRequestByReceiver.value = rejectedRecord.filter(item => item.direction === 'sender')

    // 待处理状态提醒
    if (pendingRequestByReceiver.value.length > 0) {
        statusStore.pending_dot_status = true
    } else {
        statusStore.pending_dot_status = false
    }
}

// 好友关系更新
const friendShipUpdate = async (status, tid) => {
    const { data: res } = await FriendShipUpdate_API(status, tid)
    if (res.code === 200) {
        fetchFriendshipList()
        message.success(res.message)
        socket.emit('friendship update notification', status, tid)
    } else {
        message.error(res.message)
    }
}

// 组件挂载时加载数据
onMounted(() => {
    fetchFriendshipList()
    socket.once('friendship pass notification', (message) => {
        notification.success({
            key: 'friendship pass notification',
            message: '好友提醒',
            description: message
        });
        fetchFriendshipList()
    })
})
</script>

<style lang="less" scoped>
.friend-request-container {
    width: 100%;
    height: 100vh;
    padding: 20px;
    display: grid;
    grid-template-rows: 55px 1fr;
    gap: 15px;
    position: relative;

    .content {
        padding: 20px;

        details {
            color: gray;
            margin-bottom: 15px;

            summary {
                font-size: 14px;
            }

            .a-page-header {
                width: 100%;
                border-bottom: 1px solid #DEDEDE;
                z-index: 0;
            }

            .a-list {
                margin-top: 5px;
                border-bottom: 1px solid #DEDEDE;

                .a-list-item {
                    position: relative;
                    .status-tag {
                        position: absolute;
                        top: 50%;
                        right: 50px;
                        transform: translateY(-50%);

                        span {
                            font-size: 12px;
                            color: gray;
                        }
                    }
                }

                .a-list-item:hover {
                    background-color: #E6E4E4;
                    border: 1px solid #DEDEDE;
                }
            }

        }
    }
}
</style>
